<template>
  <div class="apper">
    <div class="aut">
      <button :class="{ 'btn': item.style == 8502, }" :title="item.desc" v-for="(item, index) in jsonData"
        :style="[styleObject[index], styleFont]" :key="item.num" @click="add(item)">
        {{ item.desc }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { Data } from '../assets/js/data.js'


const router = useRouter();
const jsonData = ref([]);
const posObject = ref({})
const fetchJsonData = async () => {
  try {
    // const response = await axios.get("./json/w2101.json");
    // jsonData.value = response?.data?.shape;
    jsonData.value = Data.shape;
  } catch (error) {
    console.error('Error fetching JSON data:', error);
  }
};

// 添加计算属性来处理pos数据
const styleObject = computed(() => {
  return jsonData.value.map(item => {
    const [x, y, width, height] = item.pos.split(',').map(Number);
    return {
      position: "absolute",
      left: `${x}px`,
      top: `${y}px`,
      width: `${width}px`,
      height: `${height}px`,
    };
  });
});
// 添加计算属性来处理font 字体数据
const styleFont = computed(() => {
  return jsonData.value.map(item => {
    return {
      fontFamily: item.font
    };
  });
});

// 添加一个方法来处理 wndStyle 属性
const addHoverClass = (item) => {
  if (item.wndStyle === 33) {
    return 'btn';
  }
  return '';
};
//跳转
const add = (item) => {
  if (item.wndStyle == 33) {
    // router.push(`/Abouta${item.toPageName}`);
    console.log(item);
    router.push({ path: '/Abouta', query: { id: item.toPageName } })
  }
}

onMounted(() => {
  fetchJsonData()
});
</script>

<style lang="scss">
.apper {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/w2101.png");
  background-size: 100% 108%;
  position: relative;
}

.aut {
  .btn {
    font-size: 16px;
    color: #000;
    background-color: #c0c0c0;
    border: none;
    transform-style: preserve-3d;
    transition: transform 0.3s;
    padding: 10px;
    outline-offset: -4px;
    /* 轮廓线偏移 */
    border: none;
    box-shadow: inset -5px 0px 3px #6f6f6f,
      inset 5px 0px 3px#e6e6e6,
      inset 0px 5px 3px #e6e6e6,
      inset 0px -5px 3px #6f6f6f;
    /* 按钮默认内阴影样式 */
    transition: 0.1s linear;
  }


  .btn:hover {
    border: 1px solid red;
    cursor: pointer;
  }

}
</style>
